import { h, Component } from 'preact';
import s from './style';
import Modal from '~/components/Modal';
import classNames from 'classnames';
import jdcard from '~/assets/jdcard.png';
import goldLight from '~/assets/goldlight.png';
import redbag from '~/assets/redbag.png';
import fare from '~/assets/fare.png';
import vitaminb from '~/assets/vitaminB.png';
import collagen from '~/assets/collagen.png';
import bicycle from '~/assets/bicycle.png';
import cosmetic from '~/assets/cosmetic.png';
import protein from '~/assets/protein.png';
import robot from '~/assets/robot.png';
import { connect } from 'preact-redux';
const imgArray = {
	jdcard,
	redbag,
	fare,
	vitaminb,
	collagen,
	bicycle,
	cosmetic,
	protein,
	robot
};
const defaultElement = <p className={s.prizeText}>天了噜，运气超棒哒</p>;
class WinPrize extends Component {
	constructor() {
		super();
		this.state = {
			open: true
		};
	}
	onClose = () => {
		const { onClose } = this.props;
		this.setState({
			open: false
		});
		setTimeout(onClose,270);
	}
	render() {
		const { isOpen } = this.props;
		const { open } = this.state;
		const style = {
			content: {
				width: '91%',
				overflow:'visible',
				border: '0.28125rem solid #fcbe69',
				'border-bottom': '0.28125rem solid #d29e57',
				right: 'auto'
			}
		};

		const modalProps = {
			isOpen,
			style,
			className:open ? s.wrap : s.close,
			contentLabel:''
		};

		const prizeBoxElement = {
			jdcard: (<div className={s.prizeBox}>
						{defaultElement}
						<p className={s.prizeName}>恭喜您抽中京东Ｅ卡（10元代金券）</p>
					</div>),
			redbag:(<div className={s.prizeBox}>
						{defaultElement}
						<p className={s.prizeText}>
							<span className={s.prizeName}>恭喜您抽中现金红包ＸＸ元</span>
							请返回<br />汤臣倍健营养家公众号领取</p>
					</div>),
			fare:(<div className={s.prizeBox}>
						{defaultElement}
						<p className={s.prizeText}>
							<span className={s.prizeName}>恭喜您抽中现金红包ＸＸ元</span>
							叮！充值<br />成功，稍后请留意话费到账短信</p>
					</div>),
			vitaminb:(<div className={s.prizeBox}>
						{defaultElement}
						<p className={s.prizeText}>
							<span className={s.prizeName}>恭喜您，抽中维生素B族片！</span>
						</p>
					</div>),
			collagen:(<div className={s.prizeBox}>
						{defaultElement}
						<p className={s.prizeText}>
							<span className={s.prizeName}>恭喜您抽中胶原软骨素钙片！</span>
						</p>
					</div>),
			bicycle:(<div className={s.prizeBox}>
						{defaultElement}
						<p className={s.prizeText}>
							<span className={s.prizeName}>恭喜您抽中动感单车！</span>
						</p>
					</div>),
			cosmetic:(<div className={s.prizeBox}>
						{defaultElement}
						<p className={s.prizeText}>
							<span className={s.prizeName}>雅诗兰黛红石榴套装（五件套）！</span>
						</p>
					</div>),
			protein:(<div className={s.prizeBox}>
						{defaultElement}
						<p className={s.prizeText}>
							<span className={s.prizeName}>恭喜您抽中蛋白粉（450g）！</span>
						</p>
					</div>),
			robot:(<div className={s.prizeBox}>
						{defaultElement}
						<p className={s.prizeText}>
							<span className={s.prizeName}>恭喜您，抽中扫地机器人！</span>
						</p>
					</div>)
		};
		const buttonTxt = {
			jdcard: '查看使用说明',
			redbag: '确定',
			fare: '确定',
			vitaminb: '填写收货地址',
			collagen: '填写收货地址',
			bicycle: '填写收货地址',
			cosmetic: '填写收货地址',
			protein:'填写收货地址',
			robot:'填写收货地址'
		};
		const prizeName = 'protein';
		return (
			<Modal { ...modalProps }>
				<div className={s.header}>
					<div className={s.close} onClick={this.onClose}><i className="icon-close-a" /></div>
					<div className={s.title}>恭喜中奖</div>
				</div>
				<div className={s.body}>
					<div className={s.giftbox}>
						<img src={goldLight} className={s.goldLight} />
						<img src={imgArray[prizeName]} className={s[prizeName]} />
					</div>
					{prizeBoxElement[prizeName]}
					<div className={s.buttonBox}>
						<button className={s.button}>{buttonTxt[prizeName]}</button>
					</div>
				</div>
			</Modal>
		);
	}
}

export default connect()(WinPrize);
